﻿<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        /*body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }*/

        input {
            height: 32px;
            width: 295px;
            margin-bottom: 15px;
            border: 2px solid gray;
        }

        .select-inline1 {
            width: 20%;
        }

        #r-result {
            width: 100%;
        }
    </style>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ELYtYXEH1WmDrK1wDsEWRNkGviRL0ZEo"></script>-->
    <title>单车地图搜索</title>
</head>

<body>
    <form>
        <!--<div style="width:1000px; text-align:center;  ">-->
     
        <!--<label class="inline pull-label s-label-len text-right" for="province" style="line-height:32px;   height:32px; margin-left:200px;">搜索:</label>-->
        <span style="line-height:32px; height:32px; ">
            <input type="text" id="keywords" name="keywords" value="输入地址、围栏编号等进行搜索" onblur="if (this.value == '') { this.value = '输入地址、围栏编号等进行搜索' }" onfocus="if (this.value == '输入地址、围栏编号等进行搜索') { this.value = ''; this.style.color = '#737e73'; }" />
            <input id="submitBtn" type="button" value="查询" style="width:56px;" />
            <div id="r-result"></div>
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        </span>
        <!--</div>-->

        <div style="margin-bottom:900px; height:auto;">
            <div id="allmap" style="width:1170px;  height:850px; margin:0px; padding:0px; float:left; ">
            </div>

            <div style="width:330px;  float:left; margin-left:4px;">
                <label>位置:</label>

                <select ng-model="province" style="width:80px;" id="province" ng-options="s.ProvinceId as s.ProvinceName for s in selRegion.ProvinceData" ng-change="onChgProvince()">
                    <option value="">(请选择)</option>
                </select>
                <select ng-model="city" style="width:104px;" id="city" ng-options="s.CityId as s.CityName for s in cityData" ng-disabled="province=='' || province==null" ng-change="onChgCity()">
                    <option value="">(请选择)</option>
                </select>
                <select ng-model="District" style="width:104px;" id="District" ng-options="s.DistrictId as s.DistrictName for s in districtData" ng-disabled="city=='' || city==null">
                    <option value="">(请选择)</option>
                </select>
            </div>
        </div>
        <span id="MessAgeTitle" style="font-size:16px; color:blue; display:none;">蓝牙信标位置</span>
    </form>
</body>
</html>

<!--<script src="../lib/jquery-1.11.2.min.js"></script>-->


<script type="text/javascript">
    //点击回车键实现搜索功能
    $(document).ready(function () {
        $('#keywords').keydown(function (event) {
            $("#submitBtn").click();
        })

    });

    var JsonData = [];
    $(document).ready(function () {
            //点击查询按钮时触发
              $("#submitBtn").click(function(e) {
                   e.preventDefault();
                     var obj = $(this);
                     var keywords = $("input[name='keywords']").val();

                   $.ajax({
                       url: "http://localhost:5325/api/Electronicfence/SearchaMapElectronicListByCondition",
                         type : "POST",
                          contentType: "application/json;charset=utf-8",
                          data: JSON.stringify({ 'keywords': keywords }),
                          //data: { phone: phone },
                          dataType: "json",
                          success: function (data) {

                              if (data.IsSuccess && data.ResObject != null) {
                                  //var lists = data.ResObject.List[0];
                                  for (var i = 0; i < data.ResObject.Total; i++)
                                  {
                                      var resultData = data.ResObject.List[i];
                                      JsonData.push({ "ElecNumber": resultData.TotalCount, point: { lat: resultData.EnclosureLatitude, lng: resultData.EnclosureLongitude } });

                                      //暂时不用显示
                                      //JsonData.push({ "ElecNumber": resultData.EnclosureNumber, "address": resultData.Address, point: { lat: resultData.EnclosureLatitude, lng: resultData.EnclosureLongitude } });
                                  }

                                  initMap(); //创建和初始化地图

                              } else if (data.result.Message == "请输入关键字搜索！") {

                                  alert("请输入关键字搜索!");

                                  }
                            },
                             error:function(msg){
                                 alert("调用百度地图API出现异常！");
                                }
                    })
                 return false;
              })
      });


    //查询电子围栏经纬度数据
//  var JsonData = [
//{ "ElecNumber": "10100", "address": "上海浦东杨高南路750号", point: { lat: 30.2147520000, lng: 121.5412320000 } },
//{ "ElecNumber": "10101", "address": "上海市浦东新区杨高南路759号陆家嘴金融世纪广场2号楼", point: { lat: 31.2189050000, lng: 121.5412140000 } },
//{ "ElecNumber": "10102", "address": "顺风大酒店(西藏中路店)<br>黄浦区西藏中路500号", point: { lat: 31.241825, lng: 121.480892 } },
//{ "ElecNumber": "10106", "address": "圆苑酒家梅陇镇店<br>静安区南京西路1038号", point: { lat: 31.235422, lng: 121.462735 } }
//        ];

 //初始化地图信息
 $(document).ready(function () {
        initMap(); //创建和初始化地图

    });

 //添加圆形区域检索暂时没用
 function circle()
 {
     // 百度地图API功能
     var map = new BMap.Map("allmap");            // 创建Map实例
     var mPoint = new BMap.Point(121.48789949, 31.24916171);
     map.enableScrollWheelZoom();
     map.centerAndZoom(mPoint, 12);
     var circle = new BMap.Circle(mPoint,9000, { fillColor: "blue", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3 });
     map.addOverlay(circle);

 }

function initMap(){
    createMap();      //创建地图
    setMapEvent();    //设置地图事件
    addMapControl();  //向地图添加控件
    //addMarker();     //添加标注

    }
    //创建地图函数：
function createMap(){
    var map = new BMap.Map("allmap");    //在百度地图容器中创建一个地图
    map.centerAndZoom(new BMap.Point(121.48789949, 31.24916171), 12); //设定地图的中心点和坐标并将地图显示在地图容器中
    window.map = map;//将map变量存储在全局
    map.addControl(new BMap.NavigationControl());  //添加鱼骨控件
    map.addControl(new BMap.MapTypeControl());    //添加地图类型控件
    map.enableScrollWheelZoom();
    map.enableAutoResize();
    message = new BMap.InfoWindow();         //弹出提示框
    //循环添加标注信息
    for (var i = 0; i < JsonData.length; i++) {
        addMarker(window.document.getElementById("MessAgeTitle"), JsonData[i].ElecNumber, JsonData[i].point);
    }
}

  //ip定位
function myFun(result) {
    var cityName = result.name;
    map.setCenter(cityName);
    //alert("当前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);

    //地图事件设置函数：
function setMapEvent(){
    map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
    map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
    map.enableKeyboard();//启用键盘上下左右键移动地图
    map.enableScrollWheelZoom(true);
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));// 添加缩略地图控件
    }
 //地图控件添加函数：
function addMapControl(){
        //向地图中添加缩放控件
     var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
     map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
     var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
     map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
     var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
     map.addControl(ctrl_sca);
}

//创建图标--将标注添加到地图中
function addMarker(title,ElecNumber, point)
{
    //用给定的图像地址和大小创建图标对象实例   图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示
    var icon = new BMap.Icon('Map/weilanIcon.png', new BMap.Size(40, 58), {
        anchor: new BMap.Size(10, 30),              //图标的定位点相对于图标左上角的偏移值
        infoWindowAnchor: new BMap.Size(10, 0)      //信息窗口开启位置相对于图标左上角的偏移值
    });
    var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat), {
         icon: icon,
         offset: new BMap.Size(0, 20)
    });    //新增标注
    map.addOverlay(marker);
    map.setCenter(new BMap.Point(point.lng, point.lat));
    //for (var i = 0; i < JsonData.length; i++) {
    //    showmessage(title, ElecNumber, new BMap.Point(point.lng, point.lat));
    //}
    showmessage(title, ElecNumber, new BMap.Point(point.lng, point.lat)); //默认弹出提示消息
    marker.addEventListener("click", function () {
        showmessage(title, ElecNumber, new BMap.Point(point.lng, point.lat));
        //window.open("/bicycle/UploadFile.html", '_blank');//超级链接

    });
    //(function () {
    //    var index = i;
    //    mkr.addEventListener("click", function () {
    //        this.openInfoWindow(new BMap.InfoWindow("闭包二" + index, { width: 200, height: 0, title: "闭包一" + index, enableMessage: false }));
    //    }); //在图标实例上添加鼠标点击事件
    //})();

    marker.enableDragging(); //可以拖拽标注
    //marker.setAnimation(BMAP_ANIMATION_BOUNCE);                // 跳动的动画
     return marker;



    ////用给定的图像地址和大小创建图标对象实例   图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示
    //var icon = new BMap.Icon('Map/weilanIcon.png', new BMap.Size(40, 58), {
    //    anchor: new BMap.Size(10, 30),              //图标的定位点相对于图标左上角的偏移值
    //    infoWindowAnchor: new BMap.Size(10, 0)      //信息窗口开启位置相对于图标左上角的偏移值
    //});

    //var mkr = new BMap.Marker(new BMap.Point(121.5412140000, 31.2189050000), {//创建一个图标实例
    //    icon: icon
    //});

    //var opts = {
    //    width: 200,     // 信息窗口宽度    如果指定的宽度为0，则信息窗口的宽度将按照其内容自动调整
    //    height: 0,     // 信息窗口高度  如果指定的高度为0，则信息窗口的高度将按照其内容自动调整
    //    title: "蓝牙信标", // 信息窗口标题
    //    enableMessage: false//设置允许信息窗发送短息
    //    //message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"  这个是指短信内容
    //}

    //var infoWindow = new BMap.InfoWindow("地址：上海市浦东新区杨高南路759号陆家嘴金融世纪广场2号楼", opts);  // 创建信息窗口对象
    //mkr.addEventListener("click", function () { this.openInfoWindow(infoWindow); });    //在图标实例上添加鼠标点击事件

    ////添加鼠标点击事件也可简写为如下形式,可以方便在循环添加事件使用闭包的时候使用
    ////mkr.addEventListener("click", function(){this.openInfoWindow(new BMap.InfoWindow("地址：市东城区王府井大街88号乐天银泰百货八层",{width : 200,height: 0,title : "海底捞王府井店",enableMessage:false}));});
    //map.addOverlay(mkr);        //将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次

}

//显示提示框信息
function showmessage(title, ElecNumber, point) {
    message.setWidth(50);
    message.setHeight(50);
    message.redraw();   //重绘信息窗口，当信息窗口内容发生变化时进行调用
    message.setTitle(title);
    message.setContent("车辆总数：" + ElecNumber);


    message.disableMaximize();   //禁用窗口最大化功能
    message.enableAutoPan();     //开启打开信息窗口时地图自动平移
    map.openInfoWindow(message, point);
}


// initMap();//创建和初始化地图
// 百度地图API功能
function G(id) {
    return document.getElementById(id);
}

//var map = new BMap.Map("allmap");
//map.centerAndZoom("上海", 12);                   // 初始化地图,设置城市和地图级别。

var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    {
        "input": "keywords"
    , "location": map
    });

ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
    var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
        value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

    value = "";
    if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    G("searchResultPanel").innerHTML = str;
});

var myValue;
ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
    G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

    //setPlace();
});

function setPlace() {
    map.clearOverlays();    //清除地图上所有覆盖物
    function myFun() {
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 18);
        map.addOverlay(new BMap.Marker(pp));    //添加标注
    }
    var local = new BMap.LocalSearch(map, { //智能搜索
        onSearchComplete: myFun
    });
    local.search(myValue);
}



</script>



<script>



</script>